<title>通用图片库</title>
<div class="layui-fluid images_div" style="display: none;">
    <form class="layui-form images_form" id="images_form">
        <div class="layui-col-md12">
            <div class="layui-col-md11" style="margin: 10px 0px 0px 10px;">
                <div class="layui-col-md3">
                    <!--<a class="layui-btn layui-col-md5" lay-submit lay-filter="upload_images">上传图片</a>-->
						<a class="layui-btn layui-col-md5">上传图片</a>
						<input id="addImgPutImagesUpload" type="file" multiple="multiple" style="width: 42%;">
                    <a class="layui-btn layui-col-md5" lay-submit lay-filter="group_manage" style="margin-left: 10px;">分组管理</a>
                </div>
                <div class="layui-col-md8">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <input name="images_search_name" placeholder="请输入图片名称" autocomplete="off"
                                       class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <a class="layui-btn" lay-submit lay-filter="images_find">查询</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-col-md3" style="margin: 10px 10px 20px 10px; height: 420px;background-color: #f2f2f2;">
                <ul class="images_group_ul">
                    <li data="0" class="images_group_li images_group_li_ungrouped check">
                        <span class="left_str">未分组</span>
                        <span class="right_str ungrouped">0</span>
                    </li>
                    <div class="images_group_list"></div>
                </ul>
            </div>
            <div class="layui-col-md8" style="margin: 10px 20px 20px 10px; height: 420px;">
                <div class="images_img_list" style="height: 390px"></div>
                <div id="images_page" style="float: right; height: 30px; margin: 0px;"></div>
            </div>
        </div>
        <div style="text-align: center;">
            <button type="button" class="layui-btn layui-btn-disabled sub_images_class" lay-submit
                    lay-filter="sub_images">确定
            </button>
        </div>
    </form>
</div>
<div class="layui-fluid pageTableImagesGroup" style="display: none;">
    <div class="layui-col-md12">
        <form class="layui-form layui-col-md10">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input name="searchNameImagesGroup" placeholder="请输入分组名称" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <a class="layui-btn" lay-submit lay-filter="find_images_group">查询</a>
                </div>
            </div>
        </form>
        <a class="layui-btn layui-col-md2" lay-submit lay-filter="showAddImagesGroup">新增</a>
    </div>
    <!--分组管理数据表格-->
    <div class="layui-col-md12">
        <table id="pageTableImagesGroup" lay-filter="pageTableImagesGroup"
               lay-data="{id: 'pageTableImagesGroup'}"></table>
    </div>
</div>
<form class="layui-form add_edit_form_images_group" style='display:none;' id="add_edit_form_images_group">
    <div class="layui-form-item">
        <label class="layui-form-label">分组名称</label>
        <div class="layui-input-inline">
            <input name="name_images_group" required lay-verify="required" placeholder="请输入分组名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="checkbox" name="status_images_group" checked lay-skin="switch" lay-text="开启|关闭">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <a class="layui-btn" lay-submit lay-filter="sub_images_group">提交</a>
        </div>
    </div>
</form>
<!--<form class="layui-form pageTableUploadImages" style='display:none;' id="pageTableUploadImages">-->
    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">上传至分组</label>-->
        <!--<div class="layui-input-inline">-->
            <!--<select name="images_group_id" id="images_group_id"> </select>-->
        <!--</div>-->
    <!--</div>-->
    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">本地图片</label>-->
        <!--<div class="layui-input-block">-->
					<!--<span class="layui-col-md12" style="position:relative; display:block;">-->
						<!--<a class="layui-btn layui-col-md4">上传</a>-->
						<!--<input id="addImgPutImagesUpload" type="file" multiple="multiple">-->
					<!--</span>-->
            <!--<img id="imageImagesUpload">-->
        <!--</div>-->
    <!--</div>-->
    <!--<div class="layui-form-item">-->
        <!--<div class="layui-input-block">-->
            <!--<a class="layui-btn" lay-submit lay-filter="sub_upload_images">保存</a>-->
        <!--</div>-->
    <!--</div>-->
<!--</form>-->
<!--添加/编辑签名-->
<script type="text/javascript">
    layui.use('images', layui.factory('images'));
</script>
<script type="text/html" id="operationsImagesGroup">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<!--状态码模板-->
<script type="text/html" id="imagesGroupStatusTpl">
    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="开启|关闭" lay-filter="statusImagesGroup" {{
           d.status== 1 ? 'checked' : '' }}>
</script>
<style>
    .images_form .images_group_ul li {
        height: 20px;
        padding: 5px;
    }

    .images_form .images_group_ul .check {
        background-color: #ffffff;
    }

    .images_form .images_group_ul .left_str {
        float: left;
    }

    .images_form .images_group_ul .right_str {
        float: right;
    }

    .images_form .image_one_div {
        height: 120px;
        width: 100px;
        float: left;
        text-align: center;
        margin: 5px 10px 5px 10px;
        overflow: hidden;
    }

    .images_form .image_one_div span {
        height: 20px;
        width: 100px;
    }

    .images_form .images_img_list img {
        height: 100px;
        width: 100px;
    }

    .images_form .images_img_list .check {
        border: 2px solid #0066FF;
        box-sizing: border-box;
    }

    .pageTableImagesGroup, .add_edit_form_images_group, .pageTableUploadImages {
        margin-top: 20px;
        margin-right: 20px;
    }

    #imageImagesUpload {
        height: 200px;
        width: 200px;
        margin-top: 10px;
        border: 1px solid #e5e5e5;
    }

    input[id=addImgPutImagesUpload] {
        border: 0px solid red;
        position: absolute;
        left: 0px;
        top: 0px;
        opacity: 0;
        height: 36px;
        width: 200px;
    }

    input[id=addImgPutImagesUpload] :hover {
        cursor: pointer;
    }

    .images_form .images_img_list .images_size {
        position: relative;
        z-index: 10;
        top: -38px;
        background-color: #b0b0b0;
        display: inline-block;
        color: white;
        filter: alpha(Opacity=80);
        -moz-opacity: 0.6;
        opacity: 0.6;
    }

    .images_form .images_img_list .images_name {
        position: relative;
        z-index: 10;
        left: 0;
        top: -36px;
        font-size: 10px;
    }

    .images_form .images_img_list .images_delete_icon {
        position: relative;
        z-index: 10;
        left: 0;
        top: -100px;
        float: right;
    }
</style>
